<template>
	<view class="container">
		<navTitle :titleRight="''" :title="'香港'"></navTitle>
		<view class="modal-content">
			<!-- 左侧区域 -->
			<view class="left-sidebar">
				<view class="item" :class="{ active: selectedType === 'mall' }" @tap="selectType('mall')">商圈</view>
				<!-- <view class="item" :class="{ active: selectedType === 'subway' }" @tap="selectType('subway')">地铁</view> -->
			</view>

			<!-- 右侧区域 -->
			<view class="right-content">
				<!-- 商圈选择后展示 -->
				<view v-if="selectedType === 'mall'">
					<view class="selection">
						<!-- 城市选择 -->
						<view class="left-col">
							<view class="left-col-item" v-for="(city, index) in cityList" :key="index"
								:class="{ active: selectedCity === city.city_name }" @tap="selectCity(city)">
								{{ city.city_name }}
							</view>
						</view>
						<!-- 区选择 -->
						<view class="right-col">
							<view v-for="(district, index) in selectedCityDistricts" :key="index"
								:class="['district-item', { 'selected': selectedDistricts.includes(district) }]"
								@tap="selectDistrict(district)">
								<view class="district-text">{{ district.name }}</view>
								<!-- 勾选符号 -->
								<view v-if="selectedDistricts.includes(district)" class="checkmark">
									<text class="checkmark-symbol">√</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 地铁选择后展示 -->
				<view v-if="selectedType === 'subway'">
					<view class="selection">
						<!-- 地铁线选择 -->
						<view class="left-col">
							<view class="left-col-item" v-for="(line, index) in subwayLines" :key="index"
								:class="{ active: selectedLine === index }" @tap="selectLine(index)">
								{{ line }}
							</view>
						</view>
						<!-- 站点选择 -->
						<view class="right-col">
							<view v-for="(station, index) in selectedLineStations" :key="index"
								:class="['station-item', { 'selected': selectedStations.includes(station) }]"
								@tap="selectStation(station)">
								<view class="station-text">{{ station }}</view>
								<!-- 勾选符号 -->
								<view v-if="selectedStations.includes(station)" class="checkmark">
									<text class="checkmark-symbol">√</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮区 -->
		<view class="bottom-buttons">
			<view class="clear-button" @tap="clearSelection">清除</view>
			<view class="confirm-button" @tap="confirmSelection">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		OpenCity,
		OpenDistrict
	} from '../../utils/api';
	import navTitle from './../boss/components/nav-title.vue';

	export default {
		components: {
			navTitle,
		},
		data() {
			return {
				isModalOpen: false, // 控制弹框的显示与隐藏
				selectedType: 'mall', // 默认选择商圈
				selectedCity: null, // 默认没有选择城市
				selectedCityID: null,
				selectedLine: null, // 默认没有选择地铁线
				selectedDistricts: [], // 选中的区（商圈）
				selectedStations: [], // 选中的站点（地铁）

				// 商圈和地铁数据
				cityList: [], // 动态加载的城市数据
				subwayLines: ['1号线', '2号线', '3号线'],
				subwayStations: {
					'1号线': ['站1', '站2', '站3'],
					'2号线': ['站4', '站5', '站6'],
					'3号线': ['站7', '站8', '站9'],
				},

				// 展示的区或站点数据
				selectedCityDistricts: [], // 当前城市的区（商圈）列表
				selectedLineStations: [], // 当前地铁线的站点列表
			};
		},
		props: {
			couponList: {},
		},
		onShow() {
			this.OpenCityList();
		},
		methods: {
			// 打开弹出框
			openModal() {
				console.log('Opening Modal');
				this.isModalOpen = true;
			},

			// 关闭弹出框
			closeModal() {
				console.log('Closing Modal');
				this.isModalOpen = false;
			},

			// 切换商圈或地铁
			selectType(type) {
				this.selectedType = type;
				this.selectedCity = null; // 重置城市选择
				this.selectedCityID = null
				this.selectedDistricts = [];
				this.selectedStations = [];
				this.selectedCityDistricts = [];
				this.selectedLineStations = [];
			},

			// 选择城市并获取相应的区数据
			async selectCity(city) {
				console.log(city, 'pps')
				this.selectedCity = city.city_name;
				this.selectedCityID = city.city_id
				const res = await OpenDistrict({
					cityid: city.city_id
				}); // 请求区数据
				console.log(res, 'res')
				if (res.code === 1) {
					this.selectedCityDistricts = res.data; // 更新区数据
				}
			},

			// 选择区（商圈）
			selectDistrict(district) {
				if (!this.selectedDistricts.includes(district)) {
					this.selectedDistricts.push(district);
				} else {
					const index = this.selectedDistricts.indexOf(district);
					if (index > -1) {
						this.selectedDistricts.splice(index, 1);
					}
				}
			},

			// 选择地铁线
			selectLine(index) {
				this.selectedLine = index;
				const selectedLine = this.subwayLines[index];
				this.selectedLineStations = this.subwayStations[selectedLine];
			},

			// 选择站点（地铁）
			selectStation(station) {
				if (!this.selectedStations.includes(station)) {
					this.selectedStations.push(station);
				} else {
					const index = this.selectedStations.indexOf(station);
					if (index > -1) {
						this.selectedStations.splice(index, 1);
					}
				}
			},

			// 清除选择
			clearSelection() {
				this.selectedCity = null;
				this.selectedDistricts = [];
				this.selectedStations = [];
				this.selectedLine = null;
				this.selectedCityDistricts = [];
				this.selectedLineStations = [];
			},

			// 确认选择
			confirmSelection() {
				uni.removeStorageSync('selectedCityID');
				uni.removeStorageSync('selectedCity');

				uni.setStorageSync('selectedCityID',this.selectedCityID);
				uni.setStorageSync('selectedCity', this.selectedCity);

				// 跳转到 tabBar 页面
				uni.switchTab({
					url: '/pages/index/cart'
				});
				this.closeModal(); // Close the modal after confirmation
			},

			// 获取城市列表
			async OpenCityList() {
				let res = await OpenCity();
				this.cityList = res.data;
				console.log(this.cityList, 'pp')
			},
		},
	};
</script>


<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: #f4f6fa;
		height: 100vh;
		/* 设置容器高度为视口高度 */
	}

	.modal-content {
		display: flex;
		height: 100%;
		/* 确保内容区域占满容器的剩余空间 */
		margin-top: 10rpx;
	}

	.left-sidebar {
		width: 20%;
		background-color: #f4f6fa;
		padding: 0 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;

		.item {
			padding: 10px;
			margin: 15px 0;
			cursor: pointer;
			text-align: center;

			&.active {
				color: #1c7af7;
			}
		}
	}

	.right-content {
		width: 70%;
		height: 100%;
		/* 让右侧内容区域填满剩余空间 */
		padding: 0 10px;
		background-color: #fff;
		margin: 0 15rpx;
		border-radius: 20rpx;
		overflow-y: auto;
		/* 如果内容过多，允许滚动 */
		display: flex;
		flex-direction: column;
	}

	.selection {
		display: flex;
		justify-content: space-between;

		.left-col,
		.right-col {
			width: 48%;
			cursor: pointer;
		}

		.left-col {
			padding: 10px;
		}

		.right-col {
			padding: 10px;
			margin-top: 10rpx;
		}
	}

	.left-col-item,
	.district-item,
	.station-item {
		padding: 5px;
		margin: 10px 0;
		border-radius: 5px;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&.active {
			color: #1c7af7;
		}

		&.selected {
			color: #1a7bf9;
		}
	}

	.checkmark {
		width: 20px;
		height: 20px;
		background-color: #1a7bf9;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.checkmark-symbol {
		font-size: 16px;
	}

	.bottom-buttons {
		display: flex;
		width: 100%;
		padding: 15rpx;
		margin-top: auto;
		/* 让按钮区推到最底部 */
	}

	.clear-button {
		background-color: #fff;
		border: 1px solid #999999;
		color: #333;
		text-align: center;
		line-height: 45px;
		width: 30%;
		border-radius: 5px;
		cursor: pointer;
	}

	.confirm-button {
		background-color: #1c7af7;
		color: white;
		text-align: center;
		line-height: 45px;
		width: 63%;
		border-radius: 5px;
		cursor: pointer;
		margin-left: 10rpx;
	}
</style>